<template>
	<view class="travel-main flex--col">
		<view class="travel-main-item travel-main-outset flex--row">
			<view class="flex--col">
				<text class="text--secondary-dark">碰面地点</text>
				<text class="text--secondary-dark--light">第一站</text>
			</view>
			<text class="travel-outset text--main-dark">{{travel.startPoint}}</text>
		</view>
		<view class="travel-main-item travel-main-info flex--row">
			<view class="travel-user flex--row">
				<image aria-label="用户头像" :src="travel.avatar" class="icon--middle avatar"></image>
				<text class="text--secondary-dark">{{travel.name}}</text>
			</view>
			<view class="travel-main-item tarvel-starttime flex--row">
				<image aria-label="开始时间" src="@/static/chux/clock.svg" class="icon--middle"></image>
				<text>{{travel.date}} {{travel.startTime}}</text>
			</view>
		</view>
		<view class="travel-main-countdown flex--row">
			<view class="travel-countdown">
				<text class="text--secondary-dark" :aria-label="'离出行开始还有'+travel.countdown">{{travel.countdown}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:['travel'],
		
	}
</script>

<style lang="scss" scoped>
	.text--main-dark{
		font-size: 26px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 20px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark--light{
		font-size: 20px;
		color:#333;
	}
	
	.travel-main{
		@include border-four-roundings;
		width:100%;
		padding:12px;
		gap:24px;
		box-sizing: border-box;
		justify-content: flex-start;
		
		&-item{
			// height:
		}
		
		&-outset,&-info{
			justify-content: space-between;
			align-items: center;
		}
		
		.travel-user{	
			gap:8px;
		}
		
		.tarvel-starttime{
			font-size:16px;
			color:#333;
		}
		
		.travel-user,.tarvel-starttime{
			align-items:center;
		}
		
	}

	
	.travel-countdown{
		text{
			color:$main-color--dark;
		}
		border-radius: 10px;
		padding:4px 8px;
		background: rgba($main-color,0.2);
	}
</style>